<script setup lang="ts">
import EditorComponent from '@/components/editor/EditorComponent.vue'
import { ref, reactive } from 'vue'
import UploadComponent from '@/components/upload/UploadComponent.vue'
import { newsCreateApi } from '@/api/news'
import { ElMessage } from 'element-plus'
import router from '@/router'
const ruleFormRef = ref()

interface NewsForm {
    [key: string]: any
    title: string
    content: string
    category: number
    cover: string
    file: Object
    isPublish: number
}

const newsForm: NewsForm = reactive({
    title: '',
    content: '',
    category: 1,    // 1最新动态    2典型案例   3通知公告，
    cover: '',
    file: {},
    isPublish: 0    // 0未发布  1已发布
})

const rules = {
    title: [
        { required: true, message: '请输入新闻标题', trigger: 'blur' },
        { min: 3, max: 50, message: '长度范围为 3 到 50 个字符', trigger: 'blur' },
    ],
    category: [
        { required: true, message: '请选择新闻类别', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请选择新闻封面', trigger: 'blur' },
    ],
}

const categoryOptions = [
    {
        label: '最新动态',
        value: 1
    },
    {
        label: '典型案例',
        value: 2
    },
    {
        label: '通知公告',
        value: 3
    },
]


const handleCoverChange = (file: File) => {
    newsForm.cover = URL.createObjectURL(file)
    newsForm.file = file
}

const handleEditorChange = (newHtml: string) => {
    newsForm.content = newHtml
}

const onSubmit = () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            const params = new FormData()
            for (const i in newsForm) {
                params.append(i, newsForm[i])
            }
            const result = await newsCreateApi(params)
            ElMessage({
                type: 'success',
                message: result.data.msg
            })
            router.push({
                path: '/news-manage/newsList'
            })
        }
    })
}

</script>

<template>
    <div>
            <el-form class="editForm" ref="ruleFormRef" :model="newsForm" label-width="auto" label-position="left"
                size="large" :rules="rules">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="newsForm.title" />
                </el-form-item>
                <el-form-item label="类别" prop="category">
                    <el-select v-model="newsForm.category" placeholder="请选择新闻类别">
                        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <EditorComponent @editorChange="handleEditorChange" />
                </el-form-item>
                <el-form-item label="封面" prop="cover">
                    <UploadComponent :avatar="newsForm.cover" @fileChange="handleCoverChange" />
                </el-form-item>

                <el-form-item>
                    <div class="buttonBar">
                        <el-button class="submitBtn" type="primary" plain @click="onSubmit">创建</el-button>
                    </div>
                </el-form-item>
            </el-form>
    </div>
</template>

<style lang='less' scoped>
.upload-demo {
    width: 550px;
}

.el-input,
.el-select {
    width: 76%;
}

.el-button {
    margin-left: 5%;
    width: 800px;
}
</style>